<template>
	<view class="container">
		<!--获取App顶部导航栏高度 -->
		<view class="status_bar"></view>
		<view class="search-box">
			<view class="search-view">
				<u-search placeholder="搜索您需要的工种/工匠名字/工号" v-model="searchtext" @search="searchWorkerlist()"></u-search>
			</view>
		</view>
		<view class="workerlist">
			<u-dropdown ref="uDropdown" active-color="#222" inactive-color="#888">
				<u-dropdown-item title="服务区域">
					<view class="drop-content">
						<view class="drop-list" :class="{'special-list':areaList.length%4!=0&&areaList.length%4!=2,'special-list2':areaList.length%4!=0&&areaList.length%4==2}">
							<view :class="{'area-active':areaActive==areaindex,'special-item':areaList.length%4!=0&&areaList.length%4==2}" v-for="(areaitem,areaindex) in areaList" :key="areaitem.id">
								<text>{{areaitem.name}}</text>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="选择工种">
					<view class="drop-content" style="padding-bottom: 0rpx;">
						<view class="drop-list" :class="{'special-list':worktypeList.length%4!=0&&worktypeList.length%4!=2,'special-list2':worktypeList.length%4!=0&&worktypeList.length%4==2}">
							<view :class="{'worktype-active':worktypeActiveList[worktypeIndex],'special-item':worktypeList.length%4!=0&&worktypeList.length%4==2}" v-for="(worktypeItem,worktypeIndex) in worktypeList" :key="worktypeIndex">
								<text>{{worktypeItem.nameOfWorkType}}</text>
							</view>
						</view>
						<view class="drop-opers">
							<view class="drop-operlist">
								<view class="reset-btn">
									<text>重置</text>
								</view>
								<view class="submit-btn">
									<text>完成</text>
								</view>
							</view>
						</view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="综合排序">
					<view class="drop-content">
						<view class="drop-list" :class="{'special-list':multipleSorts.length%4!=0 && multipleSorts.length%4!=2,'special-list2':multipleSorts.length%4!=0 && multipleSorts.length%4==2}">
							<view :class="{'sort-active':sortActive==multindex}" v-for="(multitem,multindex) in multipleSorts" :key="multitem" @tap="beforeReuqestMultlist(multindex)">
								<text>{{multitem}}</text>
							</view>
						</view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<scroll-view scroll-y="true" :style="{height:scrollviewHeight+'rpx'}" style="width: 100%;" @scrolltolower="requestWorkerlist(true)" v-if="ishaveData==1">
				<view class="workeritem" v-for="(workeritem,workerindex) in workerList" :key="workeritem.id">
					<image :src="workeritem.img" mode="" @tap="openWorkitemPopup(workeritem)"></image>
					<view class="workitem-right">
						<view class="workname-info">
							<text class="texts">姓名：{{workeritem.name}}</text>
							<view class="bzj-tag">
								<text>保证金{{workeritem.amountOfDeposit}}元</text>
							</view>
						</view>
						<view class="workertypes">
							<text class="texts">擅长：{{workeritem.beGoodAt}}</text>
						</view>
						<view class="workerprice-ck">
							<text class="texts">本地参考价:<text style="color: red;">{{workeritem.salaryExpectation}}</text>/天</text>
							<text class="worker-distance">距离2.8km</text>
						</view>
						<view class="worker-rates" v-if="workeritem.starCount">
							<u-rate :disabled="true" v-model="workeritem.starCount" size="23" active-color="rgba(255, 158, 93, 1)"></u-rate>
							<text class="rate-text">{{Number(workeritem.starCount).toFixed(1)}}分</text>
							<text class="commitmany">{{workeritem.numberOfComments}}条评论</text>
						</view>
						<view class="rates-null" v-else>
							<text>暂无评分</text>
						</view>
					</view>
				</view>
				<view style="width: 100%;height: auto;" v-if="isShowload">
					<u-loadmore :status="loadstatus" :load-text="loadText"/>
				</view>
			</scroll-view>
			<u-empty text="数据为空" mode="data" v-if="ishaveData==0"></u-empty>
		</view>
		<u-popup v-model="showWorkeritemPopup" mode="center" width="710" border-radius="15">
			    <view class="popupview">
					<view class="workeritem">
						<image :src="workitemPopupinfo.img" mode=""></image>
						<view class="workitem-right">
							<view class="workname-info">
								<text class="texts">姓名：{{workitemPopupinfo.name}}</text>
								<view class="bzj-tag">
									<text>保证金{{workitemPopupinfo.amountOfDeposit}}元</text>
								</view>
							</view>
							<view class="workertypes">
								<text class="texts">擅长：{{workitemPopupinfo.beGoodAt}} </text>
							</view>
							<view class="workerprice-ck">
								<text class="texts">本地参考价:<text style="color: red;">{{workitemPopupinfo.salaryExpectation}}</text>/天</text>
								<text class="worker-distance">距离2.8km</text>
							</view>
							<view class="worker-rates" v-if="workitemPopupinfo.starCount">
								<u-rate :disabled="true" v-model="workitemPopupinfo.starCount" size="23" active-color="rgba(255, 158, 93, 1)"></u-rate>
								<text class="rate-text">{{Number(workitemPopupinfo.starCount).toFixed(1)}}分</text>
								<text class="commitmany">{{workitemPopupinfo.numberOfComments}}条评论</text>
							</view>
							<view class="rates-null" v-else>
								<text>暂无评分</text>
							</view>
						</view>
					</view>
					<view class="workeropers">
						<view class="">
							<u-icon name="/static/icon_kf_48.png" size="28"></u-icon>
							<text>客服</text>
						</view>
						<view class="">
							<u-icon name="/static/icon_dh_49.png" size="28"></u-icon>
							<text>电话</text>
						</view>
					</view>
			    </view>
		</u-popup>
	</view>
</template>

<script>
	import {getServiceArea,getWorktype,getWorkerlist,getListSort} from '@/apis/request.js';
	export default {
		data() {
			return {
				searchtext:'',
				areaActive:-1,
				worktypeActiveList:[],
				sortActive:-1,
				showWorkeritemPopup:false,
				workitemPopupinfo:{},
				scrollviewHeight:0,
				areaList:[],
				worktypeList:[],
				workerList:[],
				pageIndex:1,
				pageSize:6,
				loadstatus:'loadmore',
				loadText:{
					loadmore: '轻轻上拉',
					loading: '努力加载中',
				    nomore: '实在没有了'
				},
				multipleSorts:['距离优先','保证金最高','接单次数','上门及时率','好评优先','综合评分'],
				multMethod:-1,
				ishaveData:-1,
				isShowload:false
			}
		},
		created() {
			const windowHeight=uni.getSystemInfoSync().windowHeight;
			this.scrollviewHeight=((windowHeight-46)/uni.getSystemInfoSync().windowWidth)*750-101;
			this.requestServiceareas();
			this.requestWorktypes();
			this.requestWorkerlist(false);
		},
		onLoad(options) {
			this.searchtext=options.searchtext;
		},
		methods: {
			closeDropdown(){
			   this.$refs.uDropdown.close();
			},
			openWorkitemPopup(workeritem){
				this.workitemPopupinfo=workeritem;
				this.showWorkeritemPopup=true;
			},
			requestServiceareas(){
				this.$http({
					url:getServiceArea,
					data:{},
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					// console.log(res);
					if(res[1].data.status=='200'){
						this.areaList=res[1].data.data;
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			requestWorktypes(){
				this.$http({
					url:getWorktype,
					method:"POST",
					data:{},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
			        // console.log(res);	
					console.log(res);
				    if(res[1].data.status=='200'){
						this.worktypeList=res[1].data.data;
						const worktypeActiveList = new Array(res[1].data.data.length).fill(false);
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			requestWorkerlist(ifGetbottom){
				if(this.loadstatus=='nomore'){
					return ;
				}
				this.loadstatus="loading";
				if(ifGetbottom == true){
					this.isShowload=true;
				}
				this.$http({
					url:getWorkerlist,
					data:{
						pageIndex:this.pageIndex,
						pageSize:this.pageSize,
						searchKeyWord:this.searchtext
					},
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						if(res[1].data.data.length>0){
							this.ishaveData=1;
							this.workerList=this.workerList.concat(res[1].data.data);
							++this.pageIndex;
							this.loadstatus="loadmore";
						}else{
							if(this.pageIndex == 1){
								this.ishaveData=0;
							}else{
								this.loadstatus="nomore";
							}
						}
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			beforeReuqestMultlist(selectSortmetIndex){
				if(this.multMethod == selectSortmetIndex){
					return ;
				}
				uni.showLoading({
					title:'加载中'
				});
				this.multMethod=selectSortmetIndex;
				this.pageIndex=1;
				this.workerList=[];
				this.loadstatus='loadmore';
				this.ishaveData=-1;
				this.requestMultsortWorkerlist();
			},
			requestMultsortWorkerlist(){
				if(this.loadstatus=='nomore'){
					return ;
				}
				this.loadstatus="loading";
				const requestProp={};
				requestProp.pageIndex=this.pageIndex;
				requestProp.pageSize=this.pageSize;
				switch(this.multMethod){
					case 0:
					    requestProp.distance="距离优先";
					    break;
					case 1:
				        requestProp.amountOfDeposit="保证金最高";
					    break;
				    case 2:
					    requestProp.numberOrdersReceived="接单次数";
					    break;
					case 3:
					    requestProp.visit="上门及时率";
					    break;
					case 4:
					    requestProp.highPraiseRate="好评优先";
					    break;
					case 5:
					    break;
				    default:
					    break;
				}
				this.$http({
					url:getListSort,
					data:requestProp,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					}
				})
				.then(res=>{
					console.log(res);
					if(res[1].data.status=='200'){
						uni.hideLoading();
						if(res[1].data.status=='200'){
							if(res[1].data.data.length>0){
								this.ishaveData=1;
								this.workerList=this.workerList.concat(res[1].data.data);
								++this.pageIndex;
								this.loadstatus="loadmore";
							}else{
								if(this.pageIndex == 1){
									this.ishaveData=0;
								}else{
									this.loadstatus="nomore";
								}
							}
						}
					}
				})
				.catch(err=>{
					console.log(err);
				});
			},
			searchWorkerlist(){
				if(this.searchtext==''){
					uni.showToast({
						icon:'none',
						title:'请输入搜索关键词'
					});
					return ;
				}
				this.pageIndex=1;
				this.isShowload=false;
				this.loadstatus="loadmore";
				this.requestWorkerlist();
			}
		}
	}
</script>

<style lang="scss">
     page{
		 width: 100%;
		 height: 100%;
	 }
	 .container{
		 width: 100%;
		 height:100%;
		 .status_bar{
		 	height: var(--status-bar-height);
		 	width: 100%;
		 }
		 .search-box{
			 width: 100%;
			 height: auto;
			 padding-top:20rpx;
		 }
		 .search-view{
			 width: 710rpx;
			 height: 80rpx;
			 margin: auto;
		 }
		 .workerlist{
		 	width: 100%;
		 	height: auto;
		 }
		 .drop-content{
		    background-color: #FFFFFF;
		    width: 100%;
		    height: auto;
		    padding-bottom: 30rpx;
		    .drop-list{
		 	   width: 680rpx;
		 	   height: auto;
		 	   margin: auto;
		 	   display: flex;
		 	   flex-wrap: wrap;
		 	   justify-content: space-between;
		 	   view{margin-top:20rpx;background-color: #E8ECF2;border-radius: 50rpx;font-size: 25rpx;text-align: center;width:155rpx;height:60rpx;line-height: 60rpx;}
		 	   .area-active{background-color: rgba(14,174,100,0.2);color:rgba(14, 174, 100, 1)}
		 	   .sort-active{background-color: rgba(14,174,100,0.2);color:rgba(14, 174, 100, 1)}
		 	   .worktype-active{background-color: rgba(14,174,100,0.2);color:rgba(14, 174, 100, 1)}
		    }
		    .special-list::after{
		 	   content: "";
		 	   display: block;
		 	   width: 155rpx;
		 	   height:60rpx;
		    }
		    .special-list2{
		 	   width: 100%;
		    		justify-content: flex-start;
		 		view{
		 			margin-left: 26rpx;
		 		}
		    }
		    .drop-opers{
		 	   box-shadow: 0 -5px 5px -5px rgba(232, 236, 242, 1);
		 	   width: 100%;
		 	   height: 100rpx;
		 	   margin-top: 30rpx;
		 	   .drop-operlist{width: 680rpx;height:100%;margin: auto;display: flex;justify-content: space-between;align-items: center;}
		 	   .reset-btn{border: 1rpx solid #F1F1F1;border-radius: 10rpx;width: 300rpx;height:75rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;font-size: 28rpx;}
		 	   .submit-btn{background-color: rgba(14, 174, 100, 1);color: #FFFFFF;font-size: 28rpx;border-radius: 10rpx;display: flex;align-items: center;justify-content: center;width: 300rpx;height:75rpx;}
		    }
		 }
		 .workeritem{
		 	width:680rpx;
		 	height: auto;
		 	padding-bottom: 20rpx;
		 	padding-top: 20rpx;
		 	border-bottom: 1rpx solid #F1F1F1;
		 	margin: auto;
		 	display: flex;
		 	image{width:240rpx;height: 240rpx;border-radius: 10rpx;}
		 	.workitem-right{display: flex;flex-wrap: wrap;flex: 1;margin-left: 20rpx;align-items: center;}
		 	.workname-info{
		 		display: flex;
		 		justify-content: space-between;
		 		height: auto;
		 		align-items: center;
		 		width:100%;
		 		.texts{font-size: 28rpx;color: rgba(34, 34, 34, 1);}
		 		.bzj-tag{background-color: rgba(255, 158, 93, 1);color: #FFFFFF;font-size: 23rpx;padding-left:10rpx;padding-right:10rpx;text-align: center;padding-top:8rpx;padding-bottom: 8rpx;border-radius: 10rpx;}
		 	}
		 	.workertypes{width:100%;height: auto;display: flex;align-items: center;}
		 	.workerprice-ck{width: 100%;height: auto;display: flex;justify-content: space-between;align-items: center;}
		 	.worker-distance{color: rgba(136, 136, 136, 1);font-size: 25rpx;}
		 	.worker-rates{width: 100%;height: auto;display: flex;align-items: center;}
		 	.rate-text,.commitmany{font-size: 25rpx;color: rgba(136, 136, 136, 1);margin-left: 10rpx;}
		 	.rates-null{width: 100%;height: auto;display: flex;font-size: 25rpx;color: #808080;}
		 }
		 .lastitem{
		 	border: none;
		 }
		 .popupview{
		 	width: 680rpx;
		 	margin: auto;
		 	height: auto;
		 	.workeropers{
		 		width: 100%;
		 		display: flex;
		 		justify-content: flex-end;
		 		align-items: center;
		 		height: 80rpx;
		 		view{
		 			display: flex;
		 			align-items: center;
		 			font-size: 25rpx;
		 			margin-left: 15rpx;
		 			text{margin-left: 15rpx;}
		 		}
		 	}
		 }
	 }
</style>
